<template>
    <div id="app">
        请选择游戏类型：<select name="type" id="type" v-model="type">
            <option value="gandengyan">干瞪眼</option>
            <option value="uno">uno</option>
        </select>
        <div class="gan-deng-yan" v-if="type==='gandengyan'">
            <h1>干瞪眼积分榜</h1>
            <div class="button">
                <div class="save" @click="firstPeople">
                    第一名
                </div>
                <div class="clear" @click="lastPeople()">
                    最后一名
                </div>
            </div>
            <div class="first" v-if="showFirst===true">
                <img src="./assets/笑脸.png" alt="">
                {{max.name}}:{{max.core}}分
            </div>
            <div class="first" v-if="showLast===true">
                <img src="./assets/哭.png" alt="">
                {{min.name}}:{{min.core}}分
            </div>
            <div class="name" v-for="(item,key) in people" :key="key">
                <span class="circle">{{key+1}}</span><span>{{item.name}}:分数</span>
                <input class="input-name" type="number" v-model="item.core">
            </div>
            <div class="number" style="margin-top: 5px">
                <span>得分人数：</span>
                <input type="number" v-model="number">
            </div>
            <div class="finish" @click="finish()">
                一局完成
            </div>
            <table cellspacing="0" style="margin: 0 auto;">
                <tr>
                    <th>局数</th>
                    <th>操作</th>
                    <th v-for="(item,key) in people" :key="key"><span class="circle">{{key+1}}</span>{{item.name}}</th>
                </tr>
                <tr style="border: 1px solid #aaa;" v-for="(item,key) in list" :key="key">
                    <td>{{key+1}}</td>
                    <td @click="deleteItem(key)">删除</td>
                    <td v-for="(i,k) in item" :key="k">{{i}}</td>
                </tr>
                <tr style="border: 1px solid #aaa;">
                    <td>总计</td>
                    <td></td>
                    <td v-for="(item,key) in all" :key="key">{{item}}</td>
                </tr>
            </table>
            <div class="input">
                <span>输入姓名</span>
                <input class="input-name" type="text" v-model="name">
                <span class="submit" @click="submit()">提交</span>
            </div>
            <div class="button">
                <div class="save" @click="save()">
                    读取之前数据
                </div>
                <div class="clear" @click="clear()">
                    清除所有数据
                </div>
            </div>
        </div>
        <div class="uno" v-if="type==='uno'">
            <h1>uno积分榜</h1>
            <div class="button">
                <div class="save" @click="firstPeople">
                    第一名
                </div>
                <div class="clear" @click="lastPeople()">
                    最后一名
                </div>
            </div>
            <div class="first" v-if="showFirst===true">
                <img src="./assets/笑脸.png" alt="">
                {{max.name}}:{{max.core}}分
            </div>
            <div class="first" v-if="showLast===true">
                <img src="./assets/哭.png" alt="">
                {{min.name}}:{{min.core}}分
            </div>
            <div class="name" v-for="(item,key) in people" :key="key">
                <span class="circle">{{key+1}}</span><span>{{item.name}}:分数</span>
                <input class="input-name" type="number" v-model="item.core">
            </div>
            <div class="finish" @click="finishUno()">
                一局完成
            </div>
            <table cellspacing="0" style="margin: 0 auto;">
                <tr>
                    <th>局数</th>
                    <th>操作</th>
                    <th v-for="(item,key) in people" :key="key"><span class="circle">{{key+1}}</span>{{item.name}}</th>
                </tr>
                <tr style="border: 1px solid #aaa;" v-for="(item,key) in list" :key="key">
                    <td>{{key+1}}</td>
                    <td @click="deleteItem(key)">删除</td>
                    <td v-for="(i,k) in item" :key="k">{{i}}</td>
                </tr>
                <tr style="border: 1px solid #aaa;">
                    <td>总计</td>
                    <td></td>
                    <td v-for="(item,key) in all" :key="key">{{item}}</td>
                </tr>
            </table>
            <div class="input">
                <span>输入姓名</span>
                <input class="input-name" type="text" v-model="name">
                <span class="submit" @click="submitUno()">提交</span>
            </div>
            <div class="button">
                <div class="save" @click="save()">
                    读取之前数据
                </div>
                <div class="clear" @click="clear()">
                    清除所有数据
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'app',
        data() {
            return {
                name: '',
                people: [],
                list: [],
                all: [],
                number: 3,
                max: {},
                min: {},
                showFirst: false,
                showLast: false,
                type: 'uno'
            }
        },
        methods: {
            firstPeople() {
                let maxNum = 0
                for (let i = 1; i < this.all.length; i++) {
                    if (this.all[i] > this.all[maxNum]) {
                        maxNum = i
                    }
                }
                this.max = this.people[maxNum]
                this.max.core = this.all[maxNum]
                this.showFirst = true
                setTimeout(() => {
                    this.showFirst = false
                }, 2000)
            },
            lastPeople() {
                let minNum = 0
                for (let i = 1; i < this.all.length; i++) {
                    if (this.all[i] < this.all[minNum]) {
                        minNum = i
                    }
                }
                this.min = this.people[minNum]
                this.min.core = this.all[minNum]
                this.showLast = true
                setTimeout(() => {
                    this.showLast = false
                }, 2000)
            },
            deleteItem(key) {
                this.list = this.list.slice(0, key).concat(this.list.slice(key + 1))
                this.allCompute()
                localStorage.setItem('list', JSON.stringify(this.list))
            },
            submitUno() {
                let obj = {
                    name: this.name,
                    core: 0
                }
                this.people.push(obj)
                localStorage.setItem('people', JSON.stringify(this.people))
            },
            submit() {
                let obj = {
                    name: this.name,
                    core: 0,
                    result: 0
                }
                this.people.push(obj)
                this.name = ''
                localStorage.setItem('people', JSON.stringify(this.people))
                if (this.people.length < 6) {
                    this.number = 2
                }
                if (this.people.length >= 6) {
                    this.number = 3
                }
            },
            finishUno () {
                let arr = []
                this.people.forEach(item => {
                    arr.push(item.core)
                })
                this.list.push(arr)
                localStorage.setItem('list', JSON.stringify(this.list))
                this.allCompute()
            },
            finish() {
                let arr = []
                this.people.forEach(item => {
                    arr.push(item.core)
                })
                let win = 0
                arr.forEach(item => {
                    if (item < 0) {
                        win = win + parseInt(item)
                    }
                })
                let count = 0
                for (let i = parseInt(this.number); i > 0; i--) {
                    count = count + i
                }
                let pre = Math.abs(win) / count
                for (let i = this.number; i > 0; i--) {
                    this.people.forEach(item => {
                        if (parseInt(item.core) > 0 && parseInt(item.core) === i) {
                            item.result = (pre * i).toFixed(2)
                        }
                    })
                }
                this.people.forEach(item => {
                    if (item.core <= 0) {
                        item.result = item.core
                    }
                })
                let arr1 = []
                this.people.forEach(item => {
                    if (item.core < 0) {
                        arr1.push(item.core)
                    } else {
                        arr1.push(item.result)
                    }
                })
                this.list.push(arr1)
                localStorage.setItem('list', JSON.stringify(this.list))
                this.allCompute()
            },
            allCompute() {
                this.all = []
                for (let i = 0; i < this.people.length; i++) {
                    let sum = 0
                    this.list.forEach(item => {
                        if (item[i] === undefined) {
                            sum = sum + 0
                        } else {
                            sum = sum + parseFloat(item[i])
                        }
                    })
                    this.all.push(sum)
                }
                localStorage.setItem('all', this.all)
            },
            save() {
                let people = JSON.parse(localStorage.getItem('people'))
                let list = JSON.parse(localStorage.getItem('list'))
                let all = localStorage.getItem('all').split(',')
                this.people = people
                this.list = list
                this.all = all
            },
            clear() {
                localStorage.clear()
            }
        }
    }
</script>

<style>
    .first {
        width: 200px;
        height: 200px;
        position: absolute;
        animation: myfirst 2s;
        left: 50%;
        color: orange;
        transform: translate(-50%, -50%);
        font-size: 30px;
    }

    @keyframes myfirst {
        0% {
            /*background: red;*/
            top: 0%;
        }
        25% {
            /*background: yellow;*/
            top: 25%;
        }
        50% {
            /*background: blue;*/
            top: 50%;
        }
        75% {
            /*background: orange;*/
        }
        100% {
            /*background: green;*/
            top: 70%;
        }
    }

    .button {
        display: flex;
        margin: 10px auto;
        display: inline-block;
    }

    .button div {
        display: inline-block;
        margin: 0 10px;
        padding: 5px;
        border: 1px solid #aaa;
        border-radius: 10px;
    }

    table {
        margin: 10px auto;
        border: 1px solid #aaa;
        text-align: center;
        width: 90%;
    }

    tr {
        border: 1px solid #aaa;
    }

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .submit {
        margin-left: 10px;
        border-radius: 10px;
        border: 1px solid #aaa;
        width: 100px;
        /*padding: 10px;*/
        display: inline-block;
    }

    .input-name {
        /*margin-left: 10px;*/
        margin: 10px;
        /*padding: 10px;*/
        /*height: 100px;*/
    }

    .finish {
        margin: 10px auto;
        width: 100px;
        background: blue;
        color: white;
        padding: 10px;
        border-radius: 10px;
    }

    .circle {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: inline-block;
        border: 1px solid #aaa;
    }
</style>
